<template>
  <div class="vivid-carousel">
    <slot>
    </slot>
  </div>
</template>
<script setup lang="ts">



</script>

<style scoped>
.vivid-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 90%;
  justify-self: center;
  white-space: nowrap;
  scrollbar-width: none;

  &>* {
    width: inherit;
    height: 400px;
    margin-right: 50px;
    margin-left: 50px;
    display: inline-block;
    background-color: var(--primary-color);
    scroll-snap-align: center;
  }

  ::-webkit-scrollbar {
    display: none;
  }
}
</style>
